<template>
	<view class="box">
		<view class="myElectricityMeter_box">
			<!-- 	<view class="index_container_top">

				<view class="index_container_top_container">
					<view class="index_container_top_container_title">
						致力于AI+电子信息大类复合型人才培养
					</view>
					<view class="index_container_top_container_welcome">
						期待您的加入
					</view>、
					<view class="redeMore">
						<button>了解详情</button>
					</view>
				</view>
			</view> -->
			<topBar></topBar>
		</view>
		<view class="myElectricityMeter_container">
			<view class="myElectricityMeter_container_pay">
				<view class="myElectricityMeter_container_pay_detail">
					<view class="myElectricityMeter_container_pay_detail_title">
						{{pageName}}表状态
					</view>
					<view class="myElectricityMeter_container_pay_detail_container">
						<view class="myElectricityMeter_container_pay_detail_container_box">
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								房间号：{{rechargeRecordsArr[0].dormitoryName||''}}
							</view>
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								可用余额:{{showData.money}}
							</view>
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								{{pageName}}表状态:{{showData.status}}
							</view>
						</view>
						<view class="myElectricityMeter_container_pay_detail_container_right">
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="myElectricityMeter_container_pay_detail_pay" @click="gotoOnlinePay">
						在线充值
					</view>
				</view>
			</view>
			<view class="myElectricityMeter_container_list">
				<uni-section title="充值记录" type="line">
					<view class="myElectricityMeter_container_list_box" v-for="(item,index) in rechargeRecordsArr">
						<view class="myElectricityMeter_container_list_box_top">
							<view class="myElectricityMeter_container_list_box_top_left">
								{{item.payMethod}}：
							</view>
							<view class="myElectricityMeter_container_list_box_top_right over_text">
								+{{item.money}}元
							</view>
						</view>
						<view class="myElectricityMeter_container_list_box_bottom">
							<view class="myElectricityMeter_container_list_box_bottom_left">
								{{item.payTime}}
							</view>
							<view class="myElectricityMeter_container_list_box_bottom_right over_text">
								余额：{{item.moneyBalance}}元
							</view>
						</view>
					</view>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		topBar
	} from "../../component/topBar/topBar.vue"
	import {
		getStorage
	} from "../../utils/storage.js"
	import {
		findByMoneyTypeAndDataType
	} from "../../api/request.js"
	export default {
		data() {
			return {
				dataType: null,
				moneyType: null,
				rechargeRecordsArr: [],
				pageName: '',
				roomNumber: '',
				showData: null
			};
		},
		components: {
			topBar
		},
		async onLoad() {
			let roomNumber = await getStorage({
				key: 'roomNumber'
			})
			this.roomNumber = roomNumber

		},
		onShow() {
			console.log(getApp().globalData.moneyType);
			const that = this
			if (getApp().globalData.moneyType == 'electricity') {
				this.pageName = '电'

			}
			if (getApp().globalData.moneyType == 'hotWater') {
				this.pageName = '热水'
			}
			if (getApp().globalData.moneyType == 'water') {
				this.pageName = '冷水'
			}
			this.showData = {
				status: getApp().globalData.status || '',
				money: getApp().globalData.money || 0,
			}
			uni.getStorage({
				key: "dormitoryId",
				success(res) {
					that.findByMoneyTypeAndDataTypeMethod(res.data)
					console.log(res, 'dormitoryId');
				}
			})
		},
		methods: {
			async findByMoneyTypeAndDataTypeMethod(dormitoryId) {
				let res = await findByMoneyTypeAndDataType({
					moneyType: getApp().globalData.moneyType,
					dataType: "recharge",
					dormitoryId
				})
				this.rechargeRecordsArr = res.data
			},
			gotoOnlinePay() {
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			}
		}
	}
</script>

<style lang="scss">
	.myElectricityMeter_container {
		width: 90%;
		margin: auto;
		margin-bottom: 20rpx;
		margin-top: 60rpx;

		>view {
			border-radius: 20rpx;
			overflow: hidden;
		}

		.myElectricityMeter_container_pay {
			border: 1px solid rgba(189, 189, 189, 1);
			margin-bottom: 20rpx;

			.myElectricityMeter_container_pay_detail {
				display: flex;
				flex-direction: column;

				.myElectricityMeter_container_pay_detail_title {
					background: #2F3141;
					color: white;
					padding: 30rpx;
					border-top-right-radius: 30rpx;
					border-top-left-radius: 30rpx;
				}

				.myElectricityMeter_container_pay_detail_container {
					display: flex;
					justify-content: space-between;

					.myElectricityMeter_container_pay_detail_container_box {
						display: flex;
						flex-direction: column;
						flex: 1;
						padding: 16rpx;

						.myElectricityMeter_container_pay_detail_container_box_item {
							margin-bottom: 20rpx;
						}
					}
				}

				.myElectricityMeter_container_pay_detail_pay {
					background-color: #FF99D3;
					text-align: center;
					padding: 16rpx 26rpx;
					color: white;
					// width: 120rpx;
					margin: auto;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.myElectricityMeter_container_list {
			border: 1px solid rgba(189, 189, 189, 1);
			margin-bottom: 20rpx;

			.myElectricityMeter_container_list_box {
				display: flex;
				flex-direction: column;
				width: 90%;
				margin: auto;

				.myElectricityMeter_container_list_box_top,
				.myElectricityMeter_container_list_box_bottom {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}

				.myElectricityMeter_container_list_box_top {
					.myElectricityMeter_container_list_box_top_right {
						opacity: 1;
						font-weight: 400;
						color: rgba(69, 182, 117, 1);
						text-align: left;
						vertical-align: top;
					}
				}

				.myElectricityMeter_container_list_box_bottom {
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
		}
	}

	.myElectricityMeter_box {
		width: 90%;
		margin: auto;
	}

	.redeMore {
		width: 186.96rpx;
		height: 70.16rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;

		text {
			font-size: 28rpx;
			text-align: center;
			color: rgba(81, 105, 240, 1);
		}
	}
</style>